<template>
    <el-card id="tableCrad">
        <div slot="header" class="clearfix">
            <span>医生个人信息</span>
        </div>
        <el-form label-position="top" :rules="rules" :model="row">
            <el-form-item label="编号">
                <el-input readonly v-model="row.code"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input readonly v-model="row.name"></el-input>
            </el-form-item>
            <el-form-item label="电子签" prop="sign">
                <el-image :src="baseURL + row.sign" :fit="fit">
                    <div slot="error" class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <el-button type="primary" @click="signOpen" style="margin: 10px;">手写签名</el-button>
            </el-form-item>
        </el-form>
        <!-- 电子签弹窗开始 -->
        <el-dialog title="手写电子签 (使用鼠标在方框内书写)" :visible.sync="esignDialogVisible" width="30%" :before-close="signClose"
            v-loading="loading">
            <vue-esign id='canvas' ref="esign" :width='1000' :height="500" style="border: 1px dashed #c2c1c1;"
                :isCrop="false" :lineWidth="4" :isClearBgColor="false" lineColor="#000000" bgColor="#f8f9fa" />
            <span slot="footer" class="dialog-footer">
                <el-button plain @click="resetEsign">清空画板</el-button>
                <el-button @click="signClose">取 消</el-button>
                <el-button type="primary" @click="signConfirm">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 电子签弹窗结束 -->

    </el-card>
</template>

<script>
import { baseURL } from "@/api/request";
import { base64ToFile } from "@/utils/util";
export default {
    data() {
        return {
            row: {
                name: '',
                code: '',
                sign: '',
            },
            rules: {
                name: [{ required: true, message: "请输入名称", trigger: "blur" }],
                code: [{ required: true, message: "请输入编号", trigger: "blur" }],
            },
            //弹窗参数
            esignDialogVisible: false,
            loading: false,
            //资源基地址
            baseURL: baseURL,
        }
    },
    methods: {
        getSelfDrData: function () {
            this.request
                .get("/doctor/getSelfDrData", {
                    params: {
                        uid: localStorage.getItem("loginUser") != undefined ? JSON.parse(localStorage.getItem("loginUser")).id : null,
                    },
                })
                .then((res) => {
                    if (res.code == 200) {
                        this.row = {
                            code: res.data.code,
                            name: res.data.name,
                            sign: res.data.sign,
                        };
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error",
                        });
                    }
                })
        },
        signOpen(){
            this.esignDialogVisible = true;
        },
        signClose(){
            this.esignDialogVisible = false;
        },
        signConfirm(){
            const that = this;
            this.$refs.esign.generate().then(res => {
                const file = base64ToFile(res, "sign");
                this.$alert("是否确定提交", "提示", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                        if (action == "confirm") {
                            const formData = new FormData();
                            formData.append("file", file);
                            formData.append("uid", localStorage.getItem("loginUser") != undefined ? JSON.parse(localStorage.getItem("loginUser")).id : null);
                            this.loading = true;
                            this.request
                                .post("/doctor/uploadSign", formData)
                                .then((res) => {
                                    if (res.code == 200) {
                                        this.$message({
                                            message: res.msg,
                                            type: "success",
                                        });
                                        this.signClose();
                                        this.getSelfDrData();
                                    } else {
                                        this.$message({
                                            message: res.msg,
                                            type: "error",
                                        });
                                    }
                                    this.loading = false;
                                })
                                .catch((err) => {
                                    this.loading = false;
                                });
                        }
                    },
                });
            }).catch(err => {
                that.$message({
                    message: '需要先进行绘写',
                    type: "error",
                });
            })
        },
        resetEsign: function(){
            this.$refs.esign.reset();
        }
    },
    created() {
        // 初始化
        this.getSelfDrData();
    },
}
</script>

<style></style>